<template>
  <div class="header">
    <div class="container">
      <div class="logo fleft">
        <el-link href="/" :underline="false"><el-image :src="src" /></el-link>
      </div>
      <div class="nav fright">
        <h1>中欧金融MBA课程在线报名表</h1>
        <p>TIFFANY YUAN 报考人姓名</p>
      </div>
    </div>
  </div>
  <div class="print_wrap">
    <div class="container">
      <div class="section section1">
        <h2>个人申请</h2>
        <p class="mt30">
          我谨此声明，我填写的网上报名表中的信息及递交的所有申请材料皆真实、准确、完整。我同意在需要的情况下提交原件以确认我的申请资格。报名表中申请人自述完全由我个人完成，推荐信由推荐人撰写。我知道报名材料中信息的虚假、错误或重大遗漏会导致不录取或取消学籍，所交纳的费用将不予退还。
        </p>
        <p class="mt30">
          我理解并同意中欧国际工商学院关于全部申请材料归学院所有，无论考生录取与否均不予退回的规定。我授权中欧国际工商学院使用申请表中的信息查询本人以往的学习和工作记录。
        </p>
      </div>
      <div class="section section2 mt30">
        <h2 class="p_title">报考志愿</h2>
        <div class="section_body">
          <b>参加笔试方式：</b>不参加中欧笔试，提供GMAT成绩
        </div>
      </div>
      <div class="section section3">
        <h2 class="p_title">个人信息</h2>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>姓名：</b>{{ baseinfo.name }}</p>
            <p><b>性别：</b>{{ baseinfo.sex }}</p>
            <p><b>婚姻状况：</b>{{ baseinfo.marry }}</p>
            <p><b>身份证/护照号：</b>{{ baseinfo.cardid }}</p>
          </div>
          <div class="right_box item">
            <p><b>国籍/地区：</b>{{ baseinfo.region }}</p>
            <p><b>出生日期：</b>{{ baseinfo.birth }}</p>
            <p><b>出生地：</b>{{ baseinfo.birthplace }}</p>
          </div>
        </div>
        <div class="lineh"></div>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>选择联系地址：</b>{{ baseinfo.office_address }}</p>
            <h2 class="mt20">办公地址</h2>
            <p><b>国家/地区：</b>{{ baseinfo.office_region }}</p>
            <p><b>详细地址：</b>{{ baseinfo.office_addr }}</p>
            <p><b>邮政编码：</b>{{ baseinfo.office_zip }}</p>
            <p><b>办公电话：</b>{{ baseinfo.office_tel }}</p>
            <p><b>办公传真：</b>{{ baseinfo.office_fax }}</p>
          </div>
          <div class="right_box item">
            <p><b>电子邮箱：</b>{{ baseinfo.office_email }}</p>
            <p><b>手机：</b>{{ baseinfo.office_mobile }}</p>
          </div>
        </div>
        <div class="lineh"></div>
        <div class="section_body flex">
          <div class="left_box item">
            <h2>家庭地址</h2>
            <p><b>国家/地区：</b>{{ baseinfo.home_region }}</p>
            <p><b>详细地址：</b>{{ baseinfo.home_addr }}</p>
            <p><b>邮政编码：</b>{{ baseinfo.home_zip }}</p>
            <p><b>家庭传真：</b>{{ baseinfo.home_fax }}</p>
            <p><b>紧急联系人：</b>{{ baseinfo.home_name }}</p>
          </div>
          <div class="right_box item">
            <p><b>家庭电话：</b>{{ baseinfo.home_tel }}</p>
            <p><b>手机：</b>{{ baseinfo.home_mobile }}</p>
          </div>
        </div>
      </div>

      <div class="section section4">
        <h2 class="p_title">目前工作</h2>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>全职工作经验：</b>{{ baseinfo.work_exper }}</p>
          </div>
          <div class="right_box item">
            <p><b>全职工作经验：</b>{{ baseinfo.work_exper2 }}</p>
          </div>
        </div>
        <div class="lineh"></div>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>工作单位：</b>{{ baseinfo.work_company }}</p>
            <p><b>职务：</b>{{ baseinfo.work_post }}</p>
            <p><b>担任此职务年限：</b>{{ baseinfo.work_year }}</p>
          </div>
          <div class="right_box item">
            <p><b>下属员工总数：</b>{{ baseinfo.work_staff }}</p>
            <p><b>在此单位工作时间从：</b>{{ baseinfo.work_date }}</p>
          </div>
        </div>
        <div class="lineh"></div>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>主要工作职责：</b>{{ baseinfo.work_duty }}</p>
            <p><b>工作主要领域：</b>{{ baseinfo.work_field }}</p>
            <p><b>行业类别：</b>{{ baseinfo.work_cate }}</p>
          </div>
          <div class="right_box item">
            <p><b>工作地点：</b>{{ baseinfo.work_addr }}</p>
            <p><b>单位的性质：</b>{{ baseinfo.work_nature }}</p>
            <p><b>公务员级别：</b>{{ baseinfo.work_level }}</p>
          </div>
        </div>
        <div class="lineh"></div>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>是否为上市公司：</b>{{ baseinfo.work_isup }}</p>
            <p><b>单位主要财务数据：</b></p>
          </div>
          <div class="right_box item">
            <p><b>是否有上级总公司：</b>{{ baseinfo.work_allcp }}</p>
            <p><b>（百万人民币）</b></p>
          </div>
        </div>
      </div>
      <div class="section section5">
        <el-table
          :data="business"
          border
          fit
          style="width: 100%"
          class="sec_table tbl_mt"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#313131',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#434343',
          }"
          :cell-style="{
            borderColor: '#434343',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="company" label=""> </el-table-column>
          <el-table-column prop="total" label="总资产"> </el-table-column>
          <el-table-column prop="income" label="年销售收入"> </el-table-column>
          <el-table-column prop="amount" label="年所得税缴纳额">
          </el-table-column>
          <el-table-column prop="annual" label="年利润"> </el-table-column>
          <el-table-column prop="number" label="员工人数"> </el-table-column>
        </el-table>
        <div class="section_body">
          <p>
            <b>如果您的公司是合资公司，请列出投资方及投资比例：</b
            >{{ baseinfo.work_ratio }}
          </p>
          <p><b>单位网址：</b>{{ baseinfo.work_url }}</p>
        </div>
      </div>
      <div class="section section6">
        <h2 class="p_title">以往工作</h2>
        <el-table
          :data="oldwork"
          border
          fit
          style="width: 100%"
          class="sec_table tbl_mt"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#313131',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#434343',
          }"
          :cell-style="{
            borderColor: '#434343',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="begintime" label="起止时间"> </el-table-column>
          <el-table-column prop="company" label="单位"> </el-table-column>
          <el-table-column prop="post" label="职务"> </el-table-column>
        </el-table>
        <el-table
          :data="oldwork"
          border
          fit
          style="width: 100%"
          class="sec_table tbl_mt"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#313131',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#434343',
          }"
          :cell-style="{
            borderColor: '#434343',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="begintime" label="起止时间"> </el-table-column>
          <el-table-column prop="company" label="单位"> </el-table-column>
          <el-table-column prop="post" label="职务"> </el-table-column>
        </el-table>
      </div>
      <div class="section section7">
        <h2 class="p_title">荣誉和奖励</h2>
        <el-table
          :data="awards"
          border
          fit
          style="width: 100%"
          class="sec_table tbl_mt"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#313131',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#434343',
          }"
          :cell-style="{
            borderColor: '#434343',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="org" label="颁发机构"> </el-table-column>
          <el-table-column prop="name" label="荣誉名称"> </el-table-column>
          <el-table-column prop="gettime" label="获得时间"> </el-table-column>
        </el-table>
      </div>
      <div class="section section7">
        <h2 class="p_title">社团活动</h2>
        <el-table
          :data="activity"
          border
          fit
          style="width: 100%"
          class="sec_table tbl_mt"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#313131',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#434343',
          }"
          :cell-style="{
            borderColor: '#434343',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="name" label="社团/组织/社会公益事业">
          </el-table-column>
          <el-table-column prop="post" label="职务"> </el-table-column>
          <el-table-column prop="begintime" label="开始时间（年/月）">
          </el-table-column>
        </el-table>
      </div>
      <div class="section section8">
        <h2 class="p_title">学历</h2>
        <div v-for="item in educational" :key="item.id">
          <div class="section_body2">
            <p v-if="item.highest != ''"><b>最高学历：</b>{{ item.highest }}</p>
            <p>
              <b>{{ item.title }}</b>
            </p>
          </div>
          <el-table
            :data="item.list"
            border
            fit
            style="width: 100%"
            class="sec_table"
            :header-cell-style="{
              background: '#F0F5FA',
              color: '#313131',
              'text-align': 'center',
              padding: '1.5% 0',
              borderColor: '#434343',
            }"
            :cell-style="{
              borderColor: '#434343',
              'text-align': 'center',
              padding: '1.5% 0',
            }"
          >
            <el-table-column
              prop="university"
              label="大学/学院"
            ></el-table-column>
            <el-table-column prop="major" label="专业"></el-table-column>
            <el-table-column prop="degree" label="学位"></el-table-column>
            <el-table-column prop="nature" label="学历性质"></el-table-column>
            <el-table-column prop="endtime" label="起止时间"></el-table-column>
            <el-table-column prop="number" label="证书编号"></el-table-column>
          </el-table>
          <div class="lineh mt30" v-if="item.showline"></div>
        </div>
      </div>
      <div class="section section9 mt30">
        <h2 class="p_title">证书</h2>
        <el-table
          :data="certificate"
          border
          fit
          style="width: 100%"
          class="sec_table tbl_mt"
          :header-cell-style="{
            background: '#F0F5FA',
            color: '#313131',
            'text-align': 'center',
            padding: '1.5% 0',
            borderColor: '#434343',
          }"
          :cell-style="{
            borderColor: '#434343',
            'text-align': 'center',
            padding: '1.5% 0',
          }"
        >
          <el-table-column prop="id" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="name" label="证书名称"> </el-table-column>
        </el-table>
      </div>
      <div class="section section10">
        <h2 class="p_title">标准考试成绩</h2>
        <div class="section_body flex">
          <div class="left_box item">
            <p><b>参加考试日期：</b>{{ examResult.date }}</p>
            <p><b>Total Score：</b>{{ examResult.exam1 }}</p>
            <p><b>Total Score：</b>{{ examResult.exam2 }}</p>
          </div>
          <div class="right_box item">
            <p><b>Quantitative Score:</b>{{ examResult.exam3 }}</p>
            <p><b>AWA Score：</b>{{ examResult.exam4 }}</p>
          </div>
        </div>
      </div>
      <div class="section section10 mt30">
        <h2 class="p_title">申请人自述 <a href="#">点击查看具体内容</a></h2>
      </div>
      <div class="section section10 mt30">
        <h2 class="p_title">奖学金陈述 <a href="#">点击查看具体内容</a></h2>
      </div>
      <div class="section section11 mt30">
        <h2 class="p_title">推荐人信息</h2>
        <div v-for="item in recommendList" :key="item.id">
          <div class="section_body flex">
            <div class="left_box item">
              <h2>{{ item.title }}</h2>
              <p><b>姓名：</b>{{ item.list.name }}</p>
              <p><b>手机：</b>{{ item.list.mobile }}</p>
              <p><b>单位：</b>{{ item.list.company }}</p>
              <p class="textindent">{{ item.list.company2 }}</p>
              <p><b>职位：</b>{{ item.list.position }}</p>
              <p class="textindent">{{ item.list.position2 }}</p>
            </div>
            <div class="right_box item">
              <p><b>电子邮箱：</b>{{ item.list.email }}</p>
            </div>
          </div>
          <div class="lineh" v-if="item.showline"></div>
        </div>
      </div>
      <div class="section section12 mt30">
        <h2 class="p_title">其它信息</h2>
        <div class="section_body3">
          <ul>
            <li>
              <div class="sb_title">1、您的学费来源：</div>
              <div class="sb_rtxt">部分赞助</div>
            </li>
            <li>
              <div class="sb_title">2、您去年的年收入？</div>
              <div class="sb_rtxt">500000 RMB</div>
            </li>
            <li>
              <div class="sb_title">3、您是否在申请其它院校的金融MBA课程？</div>
              <div class="sb_rtxt">是, 交大安泰mba</div>
            </li>
            <li>
              <div class="sb_title">
                4、您是通过下列哪种渠道第一次接触到有关中欧FMBA课程信息的？
              </div>
              <div class="sb_rtxt">外部论坛, 测试</div>
            </li>
            <li>
              <div class="sb_title">5、请列举您经常阅读的微信公众号</div>
              <div class="sb_rtxt">财新传媒</div>
            </li>
            <li>
              <div class="sb_title">6、请列举您经常使用的商业财经类APP</div>
              <div class="sb_rtxt">福布斯</div>
            </li>
            <li>
              <div class="sb_title">
                7、您是否在任何国家有过任何犯罪或不良记录？
              </div>
              <div class="sb_rtxt">是，测试有犯过罪哦</div>
            </li>
          </ul>
          <div class="advise">
            建议：建议您在提交报名表之前打印并保存。提交后，您只能查看报名表内容，而无法修改。
          </div>
        </div>
      </div>
      <div class="section section13">
        <a href="#" class="print_btn">打印</a>
      </div>
    </div>
  </div>
</template>

<script>
import src from "../../assets/images/logo.png";
export default {
  name: "print",
  components: {},
  props: {},
  data() {
    return {
      src: src,
      show: false,
      baseinfo: {
        name: "测试-tiffany Tiffany TIFFANY",
        region: "中国",
        sex: "女",
        birth: "03/04/1961",
        marry: "单身",
        birthplace: "上海市",
        cardid: "321323198711",
        office_address: "公司",
        office_email: "tiffanyyuan0116@126.com",
        office_mobile: "15900934787",
        office_region: "中国 上海市 上海",
        office_addr: "虹桥路188号",
        office_zip: "223700",
        office_tel: "021 60407438",
        office_fax: "",
        home_region: "中国 上海市 上海",
        home_tel: "02160407438",
        home_mobile: "18602155674",
        home_addr: "虹桥路188号",
        home_zip: "223700",
        home_fax: "021 60407438",
        home_name: "袁舒婷女士",
        work_exper: "10 年 2 月",
        work_exper2: "10 年 2 月",
        work_company: "测试 test",
        work_staff: "20",
        work_post: "测试 test (中层管理者)",
        work_date: "06/1962",
        work_year: "3 年 5 月",
        work_duty: "测试",
        work_addr: "上海",
        work_field: "全面管理",
        work_nature: "中资-私营企业",
        work_cate: "控股公司服务",
        work_level: "级别",
        work_isup: "否",
        work_allcp: "否",
        work_ratio: "否",
        work_url: "测试",
      },
      business: [
        {
          id: 1,
          company: "所在单位",
          total: "10000",
          income: "10000",
          amount: "10000",
          number: "10000",
        },
        {
          id: 1,
          company: "总（母）公司",
          total: "1000",
          income: "1000",
          amount: "1000",
          number: "1000",
        },
      ],
      oldwork: [
        {
          begintime: "02/1961-05/2021",
          company: "测试",
          post: "测试",
        },
        {
          begintime: "主要职责",
          company: "测试",
          post: "",
        },
      ],
      awards: [
        {
          org: "上海卫生局",
          name: "助理委员",
          gettime: "05/2021",
        },
        {
          org: "上海早教机构",
          name: "先锋队员",
          gettime: "05/2021",
        },
      ],
      activity: [
        {
          name: "哈哈哈测试",
          post: "助理委员",
          begintime: "02/1962",
        },
        {
          name: "青少年中心",
          post: "团长",
          begintime: "02/1962",
        },
      ],
      educational: [
        {
          highest: "直接领导人信息",
          title: "国民教育序列本科教育信息（或专科）：",
          showline: 1,
          list: [
            {
              id: 1,
              university: "南京师范大学",
              major: "视觉传达",
              degree: "本科",
              nature: "全日制",
              endtime: "09/1921-07/2020",
              number: "sh02145544",
            },
            {
              id: 2,
              university: "上海交通大学",
              major: "室内设计",
              degree: "硕士",
              nature: "夜大",
              endtime: "09/1921-07/2020",
              number: "sh02145544",
            },
          ],
        },
        {
          highest: "",
          title: "国民教育序列本科教育信息（或专科）：",
          showline: 0,
          list: [
            {
              id: 1,
              university: "南京师范大学",
              major: "视觉传达",
              degree: "本科",
              nature: "全日制",
              endtime: "09/1921-07/2020",
              number: "sh02145544",
            },
            {
              id: 2,
              university: "上海交通大学",
              major: "室内设计",
              degree: "硕士",
              nature: "夜大",
              endtime: "09/1921-07/2020",
              number: "sh02145544",
            },
          ],
        },
      ],
      certificate: [
        {
          id: 1,
          name: "中级经济师",
        },
        {
          id: 2,
          name: "注册会计师",
        },
      ],
      examResult: {
        date: "1963/03/03",
        exam1: "150; 0 %below",
        exam2: "0; 0 %below",
        exam3: "150; 0 %below",
        exam4: "0; 0 %below",
      },
      recommendList: [
        {
          title: "直接领导人信息",
          showline: 1,
          list: {
            id: 1,
            name: "袁哈哈",
            mobile: "18800000000",
            company: "上海锐行企业有限公司",
            company2: "facebook",
            position: "销售总监",
            position2: "direct",
            email: "tiffanyyuan0116@126.com",
          },
        },
        {
          title: "直接领导人信息",
          showline: 0,
          list: {
            id: 2,
            name: "袁哈哈",
            mobile: "18800000000",
            company: "上海锐行企业有限公司",
            company2: "facebook",
            position: "销售总监",
            position2: "direct",
            email: "tiffanyyuan0116@126.com",
          },
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.print_wrap {
  background: #ffffff !important;
}
.container {
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.fleft {
  float: left;
}

.fright {
  float: right;
}

.fleft,
.fright {
  display: inline;
}
.mt30 {
  margin-top: 30px;
}

.mt20 {
  margin-top: 20px;
}

.lineh {
  clear: bo;
  background: #003963;
  height: 1px;
  font-size: 0;
}

.p_title {
  height: 50px;
  line-height: 50px;
  background: #f0f5fa;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 20px;

  a {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #003963;
    line-height: 48px;
    float: right;

    &:after {
      clear: both;
    }
  }
}
/* main */
.header {
  background: #fff;
  height: 100px;

  .logo {
    margin-top: 25px;

    .el-image {
      width: 195px;
      display: block;
    }
  }

  .nav {
    padding-top: 20px;
    line-height: 30px;

    h1 {
      font-size: 22px;
      color: #003963;
    }

    p {
      font-weight: 400;
      color: #313131;
    }
  }
}

.print_wrap {
  clear: both;
  padding: 10px 0 30px;

  .section {
    clear: both;
    overflow: hidden;
    line-height: 30px;
    color: #313131;

    h2 {
      color: #003963;
      font-size: 20px;
    }

    .section_body {
      padding: 30px 20px;
    }

    .section_body2 {
      padding: 30px 20px 0;
    }

    .flex {
      display: flex;

      .item {
        width: 49%;
      }
    }
  }

  .section1 {
    background: #f0f5fa;
    padding: 20px;

    p {
      text-indent: 34px;
    }
  }

  .section3 {
    h2 {
      font-size: 20px;
    }
  }

  .section5 {
    .sec_table {
      margin: 0;
    }
  }

  .section11 {
    .textindent {
      text-indent: 50px;
    }
  }

  .section12 {
    .section_body3 {
      padding: 30px 0;
    }

    ul {
      li {
        display: flex;
        border-bottom: 1px solid #003963;
        padding: 20px 20px 5px;

        .sb_title {
          width: 80%;
          font-weight: bold;
          color: #313131;
        }

        .sb_rtxt {
          width: 19%;
          font-weight: 400;
          color: #313131;
          line-height: 30px;
        }
      }
    }
  }

  .advise {
    padding: 20px 0;
    color: #313131;
  }

  .section13 {
    text-align: center;

    .print_btn {
      display: inline-block;
      color: #fff;
      width: 250px;
      height: 55px;
      line-height: 55px;
      background: #c6a67d;
      border-radius: 5px;
      font-size: 24px;
      font-weight: 400;
    }
  }

  .tbl_mt {
    margin: 30px 0;
  }

  .sec_table {
    width: 100%;
    border: solid 1px #434343;

    tr {
      text-align: center;
      border: 1px solid #434343;

      td {
        padding: 10px 0;
        border: 1px solid #434343;
        color: #5a5a5a;
      }

      &.title {
        background: #f0f5fa;

        td {
          color: #313131;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .header {
    .container {
      padding: 0 15px;
    }
  }
}

@media (max-width: 414px) {
  .header {
    overflow: hidden;
    height: 100%;
    line-height: normal;

    .fleft {
      width: 100%;
      float: inline;
      text-align: center;

      .el-image {
        margin: 0 auto;
      }
    }

    .fright {
      float: inline;
      text-align: center;
      width: 100%;
      padding-bottom: 10px;
    }
  }
}
</style>
